<template>
  <div class="loginPage">
    <el-card class="el-card">
      <template #header>
        <div class="title">
          <span>后台管理系统</span>
        </div>
      </template>

      <el-form :model="form" ref="form" label-width="80px">
        <el-form-item
            label="用户名"
            prop="username"
            :rules="[
              { required: true, message: '请输入用户名', trigger: 'blur',},
              { min: 4, max: 10, message: '长度在 4 ~ 10 之间', trigger: 'blur',},
            ]">
          <el-input type="text" v-model="form.username"></el-input>
        </el-form-item>

        <el-form-item
            label="密码"
            prop="password"
            :rules="[
              { required: true, message: '请输入密码', trigger: 'blur',},
              { min: 6, max: 12, message: '长度在 6 ~ 12 之间', trigger: 'blur',},
            ]">
          <el-input type="password" v-model="form.password"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button class="el-button" type="primary" @click="login('form')">提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'LoginPage',
  data () {
    return {
      form: {
        username: '',
        password: '',
      }
    }
  },
  methods: {
    login (form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
        this.service.post('/login',this.form)
          .then(res => {
            console.log(res);
            if (res.status !== 200) return;
            if (res.data.code === 200) {
              sessionStorage.setItem("username", res.data.data.username);
              this.$message({message: '登陆成功', type: 'success', duration: 1000});
              this.$router.push('/home');
            }
          })
          .catch(err => {
              console.log(err);
          });
          console.log("aaaaaa");
        } else {
          console.log(this.form);
        }
      });
    },
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.loginPage {
  width: 100%;
  height: 100%;
  position: absolute;
  background: #409EFF;
}

.el-card {
  width: 450px;
  margin: 200px auto;
}

.title {
  font-size: 34px;
  /* 这是居中代码, 在 app 里面全局居中了 */
  /* display:table; */
  /* margin:auto; */
}

.el-button {
  width: 100%;
}
</style>
